import DetailContainer, { Title } from "@/components/DetailContainer";
import { add_device, edit_device, get_device_detail } from "@/services/device";
import { device_type, power_type } from "@/utils/enum";
import type { ProFormInstance } from "@ant-design/pro-components";
import {
  ProForm,
  ProFormDigit,
  ProFormSelect,
  ProFormText,
  ProFormTextArea
} from "@ant-design/pro-components";
import { history, useParams } from "@umijs/max";
import { useSetState } from "ahooks";
import { Form, message } from "antd";
import { useRef } from "react";

const deviceMap = {
  add: add_device,
  update: edit_device
};

const UseDeviceAddEdit = () => {
  const [form] = Form.useForm();
  const { id } = useParams();
  const isNew = id === "new";
  const formRef = useRef<ProFormInstance<any>>();
  const [state, setState] = useSetState({
    showPower: false
  });

  return (
    <DetailContainer>
      <ProForm
        form={form}
        formRef={formRef}
        layout="vertical"
        grid={true}
        rowProps={{
          gutter: [24, 0]
        }}
        request={async () => {
          if (isNew) return {};
          let resp = await get_device_detail(id as string);
          console.log("detail =>", resp);
          if (resp.code === 0) {
            if (resp.data.power_type !== 0) {
              setState({
                showPower: true
              });
            }
            return {
              ...resp.data,
              price: Number(resp.data.price)
            };
          } else {
            return {};
          }
        }}
        onFinish={async () => {
          const values = form.getFieldsValue(true);
          if (!isNew) {
            values.id = Number(id);
          }
          const resp = await deviceMap[isNew ? "add" : "update"](values);
          if (resp?.code === 0) {
            history.push("/device/list");
            message.success(`${isNew ? "新增" : "编辑"}成功`);
          }
        }}
      >
        {/* Device Type */}
        <div style={{ width: "100%" }}>
          <Title>Device Type</Title>
        </div>
        <ProFormSelect
          label="Device type"
          rules={[{ required: true, message: "此项必填" }]}
          name="device_type"
          disabled={!isNew}
          colProps={{
            span: 10
          }}
          options={device_type}
        />

        {/* 基本信息 */}
        <div style={{ width: "100%" }}>
          <Title>Device info</Title>
        </div>

        <ProFormText
          label="Device name"
          rules={[{ required: true, message: "此项必填" }]}
          name="name"
          colProps={{
            span: 10
          }}
        />

        <ProFormText
          label="Device model"
          rules={[{ required: true, message: "此项必填" }]}
          name="model"
          colProps={{
            span: 10
          }}
        />

        <ProFormSelect
          label="Power Type"
          rules={[{ required: true, message: "此项必填" }]}
          name="power_type"
          colProps={{
            span: 10
          }}
          options={power_type}
          onChange={(v) => {
            if (v !== 0) {
              setState({
                showPower: true
              });
            } else {
              setState({
                showPower: false
              });
            }
          }}
        />

        <ProFormDigit
          label="Device price"
          rules={[{ required: true, message: "此项必填" }]}
          name="price"
          colProps={{
            span: 10
          }}
          placeholder=""
          fieldProps={{
            precision: 2
          }}
        />

        {state.showPower ? (
          <ProFormText
            label="Power Value"
            name="power_value"
            rules={[{ required: true, message: "此项必填" }]}
            colProps={{
              span: 10
            }}
          />
        ) : null}

        <ProFormTextArea label="remark" placeholder="" name="remark" />

        {/* device bc */}
        <div style={{ width: "100%" }}>
          <Title>Device supplement</Title>
        </div>
        <ProFormText
          label="Device img Url"
          name="device_img"
          colProps={{
            span: 24
          }}
        />
      </ProForm>
    </DetailContainer>
  );
};

export default UseDeviceAddEdit;
